{extend name="public/base"/}
{block name="style"}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/novel/style/books.css">
{/block}
{block name="body"}
    {include file="public/topmenu" /}
    {include file="public/changepwd" /}
    <div class="mainWrap pageCenter cf">     
        {include file="public/leftmenu" /}
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/novel/style/income.css">
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/novel/style/reader_model.css">

        <div class="mainRight fl">
            <div class="crumbsWrap"><b></b><i class="before"><span>数据统计</span></i><em class="same"></em>
                    </div>

            <div class="tabSwitch cf">
                <span><a href="/stat/subscription/0.html">订阅统计</a></span>
                <span><a href="/stat/userart.html">读者群体画像</a></span>
                <span class="act"><a href="javascript:">读者行为偏好</a></span>
            </div>
            <div class="incomeWrap reader-portrait">
                <div class="filter-box cf">
                    <div class="time-range fr">
                        <p>数据统计范围：2017年1月1日起至今</p>
                    </div>
                    <em>选择作品：</em>
                    <form method="post" action="/booknovelsvip/readerpreference.html" id="subform">
                        <div class="combo-select "><select name="CBID" id="CBID" tabindex="-1">
                                                    <option value="0">暂无可选作品</option>                </select><div class="combo-arrow"></div><dl class="combo-dropdown"><dd class="option-item option-selected" data-index="0" data-value="0">暂无可选作品</dd></dl><input type="text" value="" class="combo-input text-input"></div>
                        <em>选择平台：</em>
                        <div class="combo-select "><select name="type" id="type" tabindex="-1">
                            <option value="2" selected="">起点读书</option>
                            <option value="1">QQ阅读</option>
                        </select><div class="combo-arrow"></div><dl class="combo-dropdown"><dd class="option-item option-selected" data-index="0" data-value="2">起点读书</dd><dd class="option-item" data-index="1" data-value="1">QQ阅读</dd></dl><input type="text" value="" class="combo-input text-input"></div>
                        <a class="button" href="javascript:" onclick="document.getElementById(&#39;subform&#39;).submit();return false">查看</a>
                    <input type="hidden" name="__hash__" value="1276c0d83c82474e3a5a3ba5d517031b_c07166918e8408ec5062df7af847a348"></form>
                </div>
                <!-- start 读者阅读时间段分布 -->
                <div class="bar-chart-wrap mb30">
                    <h3>读者阅读时间段分布</h3>
                    <div class="chart-wrap">
                                            <div class="no-data">
                                <div class="null"></div>
                                <p>暂无数据</p>
                            </div>            </div>
                </div>
                <!-- end 读者阅读时间段分布 -->

                <!-- start 读者互动行为趋势 -->
                <div class="bar-chart-wrap mb30">
                    <h3>读者互动行为趋势</h3>
                    <div class="chart-tab" id="j-chartTab">
                        <span class="act">推荐票</span>
                        <span>评论</span>
                    </div>
                    <div id="j-chartTabWrap">
                        <div class="chart-wrap">
                                                    <div class="no-data">
                                    <div class="null"></div>
                                    <p>暂无数据</p>
                                </div>                </div>
                        <div class="chart-wrap hidden">
                                                    <div class="no-data">
                                    <div class="null"></div>
                                    <p>暂无数据</p>
                                </div>                </div>
                    </div>
                </div>
                <!-- end 读者互动行为趋势 -->
            </div>
        <img id="requestLoadingTip" class="loadImg" style="display:none;" src="./读者行为偏好-阅文作家专区_files/loading.gif"></div>
        <script>
            $('select').comboSelect();
            //切换推荐票和评论 图表的tab
            $('#j-chartTab span').click(function(){
                $(this).addClass('act').siblings().removeClass('act');
                $('#j-chartTabWrap .chart-wrap').eq($('#j-chartTab span').index(this)).show().siblings().hide();
            });
        </script>
        <script type="text/javascript" src="__PUBLIC__/novel/js/reader_model.js"></script><script type="text/javascript" src="__PUBLIC__/novel/js/reader_per.js"></script><script>
            //readtime
            $(function () {
                $('#j-readTimeData').highcharts({
                    chart: {
                        type: 'areaspline',
                        backgroundColor:'#FAFAFA',
                        marginTop: 50,
                        height:370
                    },
                    title: {
                        text: ''
                    },
                    xAxis: {
                        categories: [
                            '00时-02时',
                            '02时-04时',
                            '04时-06时',
                            '06时-08时',
                            '08时-10时',
                            '10时-12时',
                            '12时-14时',
                            '14时-16时',
                            '16时-18时',
                            '18时-20时',
                            '20时-22时',
                            '22时-00时'
                        ]
                    },
                    yAxis: {
                        title: {
                            text: ''
                        },
                        max:100,
                        opposite:true,
                        labels: {
                            formatter: function() {
                                return this.value +'%';
                            }
                        },
                        min: 0,
                        minRange: 1
                    },
                    tooltip: {
                        shared: false,
                        valueSuffix: '%'
                    },
                    credits: {
                        enabled: false
                    },
                    plotOptions: {
                        areaspline: {
                            fillOpacity: 0.5
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    series: [{
                        name: '时间段',
                        data: [, ,, ,,,,,,,,]
                    }]
                });
            });

        </script>

        <script>
            $(function () {
                $('#j-recData').highcharts({
                    chart: {
                        type: 'areaspline',
                        backgroundColor: '#FAFAFA',
                        marginTop: 80,
                        width:898,
                        height: 480
                    },
                    title: {
                        text: ''
                    },
                    plotOptions: {
                        series: {
                            pointPlacement: 'on'
                        }
                    },
                    xAxis: {
                        categories: [
                                           ],
                    tickmarkPlacement : 'on', //设置节点位于刻度线的正上方

                    },
                    yAxis: {
                        title: {
                            text: ''
                        },
                        opposite: true,
                        min: 0,
                        minRange: 1
                    },
                    tooltip: {
                        shared: false,
                        valueSuffix: '',
                       formatter: function() {
                            return '<b>'+ this.series.name +':'+this.y+'</b><br/>'+
                                    this.x ;
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    plotOptions: {
                        areaspline: {
                            fillOpacity: 0.5
                        }
                    },
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom',
                        symbolHeight: 12,
                        symbolWidth: 12,
                        symbolRadius: 6
                    },
                    series: [
                        {
                            name: '推荐票次数',
                            data: [
                                                ]
                        },
                        {
                            name: '推荐票人数',
                            data: [
                                                ]
                        }
                    ]
                });
            });

            Highcharts.theme = {
                colors: ['rgba(130,205,255,.7)', 'rgba(132,213,155,.7)'],
                credits: {
                    enabled: false
                }
            };

            // Apply the theme
            Highcharts.setOptions(Highcharts.theme);
        </script>
        <script>
            //评论
            $(function () {
                $('#j-commentData').highcharts({
                    chart: {
                        type: 'areaspline',
                        backgroundColor: '#FAFAFA',
                        marginTop: 80,
                        width:898,
                        height: 480
                    },
                    title: {
                        text: ''
                    },
                    xAxis: {
                        categories: [
                                        ],
                      tickmarkPlacement : 'on', //设置节点位于刻度线的正上方
                    },
                    yAxis: {
                        title: {
                            text: ''
                        },
                        min: 0,
                        minRange: 1,
                        opposite: true
                    },

                    tooltip: {
                        shared: false,
                                valueSuffix: '',
                                formatter: function() {
                            return '<b>'+ this.series.name +':'+this.y+'</b><br/>'+
                                   this.x ;
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    plotOptions: {
                        areaspline: {
                            fillOpacity: 0.5
                        }
                    },
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom',
                        symbolHeight: 12,
                        symbolWidth: 12,
                        symbolRadius: 6
                    },
                    series: [
                        {
                            name: '评论次数',
                            data: [
                                                ]
                        },
                        {
                            name: '评论人数',
                            data: [
                                         ]
                        }
                    ]
                });
            });

            Highcharts.theme = {
                colors: ['rgba(130,205,255,.7)', 'rgba(132,213,155,.7)'],
                credits: {
                    enabled: false
                }
            };

            // Apply the theme
            Highcharts.setOptions(Highcharts.theme);
        </script>

    </div>
    {include file="public/footer" /}
<script type="text/javascript">
/*
    $(function () {
        var imgUrl = "";
        var artidx = "0";
        var selectid = "0";
        var articlename = "";

        CS.page.bookNovels.novelList.init(imgUrl,artidx,articlename,selectid);
    });*/
    $('#novelList').on('mouseenter', 'tr',
    function() {
        $(this).addClass('active').siblings('tr').removeClass('active');
    });
</script>
{/block}
{block name="script"}
{/block}


